<template>
  <AppCover section="movie" :bgURL="coverURL" :bgPrURL="coverPrURL" />
  <div id="Movie">    
    <div class='title'>已看电影</div>
    <div data-status="watched" class="douban-movie-list doubanboard-list"></div>
    <div class='title'>想看电影</div>
    <div data-status="wish" class="douban-movie-list doubanboard-list"></div>
    <AppMsgBoard :section="sectionVal" />    
  </div>
  <AppNav />
  <AppFooter />
</template>

<script>
import AppNav from '@/components/AppNav'
import AppCover from '@/components/AppCover'
import AppFooter from '@/components/AppFooter'
import AppMsgBoard from '@/components/AppMsgBoard'

export default {
  name: 'Movie',
  components: { AppNav, AppCover, AppFooter, AppMsgBoard },
  data(){
    return{
      sectionVal: 'movie',
      coverURL: '/files/img/section_cover/movie.jpg',
      coverPrURL: '/files/img/section_cover/movie_pr.jpg',
      curBooks_read: 0,
      curBooks_reading: 0,
      curBooks_wish: 0,
      curMovies_watched: 0,
      curMovies_watching: 0,
      curMovies_wish: 0,
      DoubanPageSize: 12,
      userID: 41536907
    }
  },
  mounted(){
    this.initDoubanBoard()
    this.addEvent()
  },
  methods: {
    initDoubanBoard(){
      $(`.douban-movie-list[data-status="watched"]`).after(`<div class="douban-loadmore" id="loadMoreMovies_watched">加载更多</div>`)
      $(`.douban-movie-list[data-status="watching"]`).after(`<div class="douban-loadmore" id="loadMoreMovies_watching">加载更多</div>`)
      $(`.douban-movie-list[data-status="wish"]`).after(`<div class="douban-loadmore" id="loadMoreMovies_wish">加载更多</div>`)
      
      this.curMovies_watched = 0
      this.curMovies_watching = 0
      this.curMovies_wish = 0
      this.loadMovies('watched')
      this.loadMovies('watching')
      this.loadMovies('wish')
    },
    addEvent(){
      let watchedBtn = document.getElementById('loadMoreMovies_watched')
      let wishBtn = document.getElementById('loadMoreMovies_wish')
      let watchingBtn = document.getElementById('loadMoreMovies_watching')
      watchedBtn && watchedBtn.addEventListener('click', () => {
        this.loadMovies('watched')
      })
      wishBtn && wishBtn.addEventListener('click', () => {
        this.loadMovies('wish')
      })
      watchingBtn && watchingBtn.addEventListener('click', () => {
        this.loadMovies('watching')
      })
    },
    loadMovies(status){
      if ($(`.douban-movie-list[data-status="` + status + `"]`).length < 1) return
      $("#loadMoreMovies_" + status).html("加载中...")

      let curMovies = 0
      if (status == 'watched') curMovies = this.curMovies_watched
      else if (status == 'watching') curMovies = this.curMovies_watching
      else curMovies = this.curMovies_wish

      let api = `${this.$DoubanAPI}?type=movie&from=${String(curMovies)}&status=${status}&userID=${this.userID}`
      $.getJSON(api, function (result) {
          $("#loadMoreMovies_" + status).html("加载更多")
          if (result.length < this.DoubanPageSize) {
              $("#loadMoreMovies_" + status).html("没有啦")
          }
          $.each(result, function (i, item) {
            var html = `<a href="` + item.url + `" target="_blank" id="doubanboard-movie-item-` + String(curMovies) + `" class="doubanboard-item">
                        <div class="doubanboard-thumb" style="background-image:url(`+ item.img + `)"></div>
                        <div class="doubanboard-title">`+ item.name + `</div>
                    </a>`
            $(`.douban-movie-list[data-status="` + status + `"]`).append(html)
            if (status === 'watched') this.curMovies_watched++
            else if (status === 'watching') this.curMovies_watching++
            else this.curMovies_wish++
          }.bind(this));
        }.bind(this));
    }
  }
}
</script>

<style lang="less" scoped>
@pageWidth: 48rem;
#Movie{
  width: @pageWidth;
  margin: 0 auto;
  padding: 0 10px;
  .title{
    font-size: 1.7rem;
    font-weight: 700;
    text-align: left;
    margin: 25px 0;
  }
}

/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) { 
  #Movie {
    max-width: 94vw;
  }
}

/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) { 
  #Movie {
    min-width: 34rem;
  }
}

/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) { 
  #Movie {
    min-width: 38rem
  }
}

/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) { 
  #Movie {
    min-width: 44rem;
  }
}

/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) { 
  #Movie {
    min-width: 48rem;
  }
}
</style>